<template>
    <!-- mv详情页 -->
    <div class="playlist-detail container">
        <!-- 左边内容 -->
        <div class="left">
            <el-card class="left-card">
                <div class="video-box">
                    <video
                        :src="videoUrl"
                        controls="controls"
                        autoplay
                    ></video>
                </div>
                <div class="video-info">
                    <h2 class="title flex-row">
                        <i class="iconfont nicemv24"></i>
                        {{ detail.name }}
                    </h2>
                    <div class="tag">
                        <a
                            v-for="item of detail.videoGroup"
                            :key="item.id"
                        >#{{ item.name }}</a>
                    </div>
                    <p class="flex-row">
                        <span>
                            发布时间：{{utils.dateFormat(detail.publishTime, 'YYYY-MM-DD') }}
                        </span>
                        <span v-if="detail.playCount">播放次数：{{ utils.tranNumber(detail.playCount, 1) }}</span>
                    </p>
                    <!-- mv点赞转发评论数据 -->
                    <div class="flex-row">
                        <div class="box">
                            <i class="iconfont nicexihuan3 icon-like"></i>
                            {{ videoDetailInfo.likeCount }}
                        </div>
                        <div class="box">
                            <i class="iconfont niceshoucang2 icon-collection"></i>
                            {{ detail.subCount }}
                        </div>
                        <div class="box">
                            <i class="iconfont nicefenxiang2 icon-share"></i>
                            {{ videoDetailInfo.shareCount }}
                        </div>
                    </div>
                </div>
                <!-- mv评论 -->
                <div class="comments">
                    <div class="title flex-row">
                        <i class="iconfont nicepinglun"></i>Comments |
                        <span class="count">
                            {{ videoDetailInfo.commentCount }} 条评论
                        </span>
                    </div>
                    <div class="list ">
                        <comment-list
                            title="精彩评论"
                            :commentList="hotComments"
                            :currentCommentId="currentCommentId"
                            v-if="hotComments.length > 0"
                        />
                        <comment-list
                            title="最新评论"
                            :commentList="comments"
                            :currentCommentId="currentCommentId"
                        />
                    </div>
                </div>
            </el-card>
        </div>
        <div class="right">
            <!-- 视频简介 -->
            <el-card class="like-card module">
                <div class="card-header flex-row">
                    <span>视频简介</span>
                </div>
                <div class="content">
                    <p v-if="detail.desc">{{ detail.desc }}</p>
                    <p v-else>视频暂无简介</p>
                </div>
            </el-card>
            <!-- 相关推荐 -->
            <el-card class="related-card module">
                <div class="card-header flex-row">
                    <span>相关推荐</span>
                </div>
                <ul>
                    <li
                        v-for="item of relatedList"
                        :key="item.vid"
                    >
                        <div class="avatar">
                            <el-image
                                :src="item.cover + '?param=320y180'"
                                :alt="item.name"
                            >
                                <div
                                    slot="placeholder"
                                    class="image-slot "
                                >
                                    <p>加载中<span class="dot">...</span></p>
                                </div>
                                <div
                                    slot="error"
                                    class="image-slot"
                                >
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div class="play-btn">
                                <button
                                    class="play "
                                    @click="toDetail(item.id)"
                                >
                                    <i class="iconfont nicebofang1"></i>
                                </button>
                            </div>
                        </div>
                        <div class="info ">
                            <h2 class="flex-row">
                                <i class="iconfont nicemv24"></i> {{ item.name }}
                            </h2>
                            <div class="author">
                                By.<span
                                    v-for="author of item.artists"
                                    :key="author.id"
                                ><small> {{ author.name }}</small></span>
                            </div>
                        </div>
                    </li>
                </ul>
            </el-card>
        </div>
    </div>
</template>

<script>
import CommentList from '@/components/common/commentList/Index.vue'
export default {
    data() {
        return {
            // mv详情
            detail: {},
            videoUrl: '',
            currentPage: 0,
            limit: 20,
            offset: 0,
            videoId: '',
            // 资源点赞数据
            videoDetailInfo: {},
            // 相关视频
            relatedList: [],
            // 评论
            hotComments: [],
            comments: [],
            currentCommentId: '',
            commentTotal: 0,
        }
    },
    components: {
        CommentList,
    },
    created() {

    },
    watch: {
        $route() {
            let id = this.$route.query.id || this.videoId
            if (id) {
                this.initialize(id)
            }
        }
    },
    mounted() {
        let id = this.$route.query.id
        if (id) {
            this.videoId = id
            this.initialize(id)
        }

    },
    methods: {
        // 获取mv播放地址
        async getMvUrl(id) {
            const { data: res } = await this.$api.getMvUrl(id)
            if (res.code !== 200) {
                return this.message.error('获取mv播放地址失败！');
            }
            // console.log(res);
            this.videoUrl = res.data.url
        },
        // 获取mv详情
        async getMvDetail(id) {
            const { data: res } = await this.$api.getMvDetail(id)

            if (res.code !== 200) {
                return this.message.error('获取mv详情失败！');
            }
            console.log(res);
            res.data.videoGroup.map(item => {
                if (item.name.indexOf('#') != -1) {
                    item.name = item.name.replace(/#/g, '')
                }
            })
            this.detail = res.data
        },
        // 获取mv点赞转发评论数据
        async getMvDetailInfo(id) {
            const { data: res } = await this.$api.getMvDetailInfo(id, new Date().getTime())
            if (res.code !== 200) {
                return this.message.error('获取mv点赞转发评论数据失败！');
            }
            // console.log(res);
            let detail = {
                isLike: res.liked,
                likeCount: res.likedCount,
                shareCount: res.shareCount,
                commentCount: res.commentCount
            }
            this.videoDetailInfo = detail
        },
        // 获取相关mv
        async getMvRelated(id) {
            const { data: res } = await this.$api.getMvRelated(id)
            // console.log(res);
            if (res.code !== 200) {
                return this.message.error('获取相关mv失败！');
            }
            this.relatedList = res.mvs
        },
        // mv评论
        async getMvComments(id) {
            let timestamp = new Date().getTime()
            let params = {
                id,
                limit: this.limit,
                offset: this.offset,
                timestamp
            }
            const { data: res } = await this.$api.getMvComments(params)
            if (res.code !== 200) {
                return this.message.error('获取mv评论失败！');
            }
            // console.log(res);
            this.commentTotal = res.total
            if (res.hotComments) {
                this.hotComments = res.hotComments
            } else {
                this.hotComments = []
            }
            this.comments = res.comments
        },
        // mv详情（相关mv）
        toDetail(id) {
            this.$router.push({
                name: 'mvDetail',
                query: {
                    id
                }
            })
        },
        // 初始化
        initialize(id) {
            this.getMvUrl(id)
            this.getMvDetail(id)
            this.getMvDetailInfo(id)
            this.getMvRelated(id)
            this.getMvComments(id)
        }

    },
}
</script>

<style lang="less" scoped>
.playlist-detail {
    display: flex;
    min-width: 1080px;
    h2 {
        color: #4a4a4a;
        font-size: 14px;
        margin-bottom: 5px;
        i {
            font-size: 24px;
            color: #fa2800;
        }
    }
    .left {
        flex: 1;
        width: 950px;
        margin-right: 20px;
        .left-card {
            width: 100%;
            padding: 15px;
            .video-box {
                position: relative;
                video {
                    width: 100%;
                    height: 100%;
                }
            }
            .video-info {
                margin-top: 10px;
                p {
                    span {
                        font-size: 12px;
                        color: #a2a2a2;
                        margin-right: 20px;
                    }
                }
                .tag {
                    margin-bottom: 10px;
                    a {
                        color: #fa2800;
                        font-size: 12px;
                        margin-right: 10px;
                    }
                }
                .box {
                    margin: 20px 0;
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 55px;
                    height: 25px;
                    background: #f2f2f2;
                    border-radius: 20px;
                    color: #161e27;
                    cursor: pointer;
                    i {
                        font-size: 24px;
                    }
                    &.active {
                        color: #fff;
                        background: #fa2800;
                        .icon-like {
                            color: #fff;
                        }
                    }
                }
            }
            .comments {
                margin-top: 20px;
                i {
                    font-size: 20px;
                    margin-right: 10px;
                }
                .count {
                    margin-left: 5px;
                }
            }
        }
    }
    .right {
        width: 350px;
        .module {
            padding: 15px;
            width: 100%;
            border-radius: 8px;
            margin-bottom: 20px;
            .card-header {
                border-left: 4px solid #fa2800;
                padding: 2px 6px;
                margin-bottom: 15px;
                font-weight: bold;
            }
        }
        .like-card {
            .content {
                line-height: 25px;
            }
        }
        .related-card {
            ul {
                li {
                    margin-bottom: 20px;
                    cursor: pointer;
                    .avatar {
                        position: relative;
                        margin-bottom: 5px;
                        .play-btn {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            .play {
                                display: none;
                                width: 32px;
                                height: 32px;
                                border: none;
                                border-radius: 50%;
                                color: #fff;
                                cursor: pointer;
                                background-color: #fa2800;
                                i {
                                    font-size: 12px;
                                }
                            }
                        }
                        &:hover {
                            .play {
                                display: block;
                            }
                        }
                    }
                    .info {
                        width: 320px;
                        .author {
                            font-size: 12px;
                            color: #a5a5c1;
                        }
                        &:hover {
                            h2 {
                                color: #fa2800;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>